<template>
  <div
    class="project-container"
    v-loading="isLoading"
    ref="projectContainerRef"
  >
    <ul>
      <li v-for="t in data" :key="t.id" class="project-item-box">
        <a
          :href="t.url || 'javascript:void(0)'"
          :target="t.url ? '_blank' : '_self'"
        >
          <div class="project-container">
            <div class="pro-img" v-if="t.thumb">
              <img v-lazy="t.thumb" :alt="t.name" />
            </div>
            <div class="pro-info">
              <div class="pro-title">{{ t.name }}</div>
              <div class="pro-desc">
                <ul>
                  <li
                    v-for="(des, i) in t.description"
                    :key="i"
                    class="pro-desc-item"
                  >
                    {{ des }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <Empty v-if="data.length === 0 && !isLoading" />
  </div>
</template>

<script>
import featchData from "@/mixins/fetchData.js";
import { getProjects } from "@/api/project.js";
import Empty from "@/components/Empty";
export default {
  mixins: [featchData({})],
  name: "Project",
  components: {
    Empty,
  },
  mounted() {
    this.$refs.projectContainerRef.addEventListener(
      "scroll",
      this.handlerProjectListScroll
    );
  },
  beforeDestroy() {
    this.$refs?.projectContainerRef.removeEventListener(
      "scroll",
      this.handlerProjectListScroll
    );
  },
  methods: {
    async fetchData() {
      const res = await getProjects();
      return res?.data || [];
    },
    handlerProjectListScroll() {
      this.$eventBus.$emit("blogListScroll", this.$refs.projectContainerRef);
    },
  },
};
</script>

<style scoped lang="less">
.project-container {
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  .project-item-box {
    padding: 8px;
    &:hover {
      cursor: pointer;
      border-radius: 10px;
      transform: scale(1.01);
      transition: all 0.4s ease-in-out;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .project-container {
      display: flex;
      box-sizing: border-box;
      .pro-img {
        width: 230px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 8px;
        }
      }
      .pro-info {
        flex: 1;
        padding: 8px;
        .pro-title {
          font-weight: 700;
          font-size: 16px;
          padding-bottom: 5px;
        }
        .pro-desc {
          li {
            line-height: 25px;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
